import classnames from 'classnames'

import Icon from '@/components/icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { AppDispatch, RootState } from '@/store'
import { useInitState } from '@/hooks'
import {
  addChannelAction,
  delChannelAction,
  getRestChannleAction,
} from '@/store/actions/home'
import { useState } from 'react'
import { setActive } from '@/store/modules/home'
import { Channel } from '@/types/data'
import { Toast } from 'antd-mobile'

type Props = {
  onClose: (show: boolean) => void
}
const Channels = ({ onClose }: Props) => {
  const dispatch = useDispatch<AppDispatch>()
  // 1. 获取用户（我的）频道和剩余推荐频道数据
  // const { userChannel } = useSelector((state: RootState) => state.home)
  const { userChannel, restChannel, active } = useInitState(
    getRestChannleAction,
    'home'
  )
  // 2. 切换我的频道编辑状态
  const [isEdit, setEdit] = useState(false)
  // 3. 点击切换频道
  const toggleActive = async (channel: Channel) => {
    // == 不是编辑状态 ==
    if (!isEdit) {
      // 1. 点击频道高亮
      dispatch(setActive(channel.id))
      // 2. 关闭弹层
      return onClose(false)
    }
    // == 编辑状态 ==
    /**
     * 1. 推荐频道不能删除
       2. 当前选中不能删除
       3. 至少要保留 4 个频道
     */
    if (channel.id === 0 || channel.id === active || userChannel.length <= 4) {
      return Toast.show({ icon: 'fail', content: '不满足删除条件！' })
    }
    // 执行删除
    try {
      await dispatch(delChannelAction(channel))
      Toast.show({ content: '删除成功！' })
    } catch (error) {}
  }
  return (
    <div className={styles.root}>
      <div className="channel-header">
        {/* 点击关闭 */}
        <Icon onClick={() => onClose(false)} type="iconbtn_channel_close" />
      </div>
      <div className="channel-content">
        {/* 1. 我的频道 */}
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', { edit: isEdit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span
              onClick={() => {
                // 编辑状态切换
                setEdit(!isEdit)
              }}
              className="channel-item-edit"
            >
              {isEdit ? '保存' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannel.map((item) => (
              <span
                onClick={() => toggleActive(item)}
                key={item.id}
                className={classnames('channel-list-item', {
                  selected: item.id === active,
                })}
              >
                {item.name}
                <Icon type="iconbtn_tag_close" />
              </span>
            ))}
          </div>
        </div>
        {/* 2. 频道推荐 */}
        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {restChannel.map((item) => (
              <span
                onClick={() => {
                  dispatch(addChannelAction(item))
                }}
                key={item.id}
                className="channel-list-item"
              >
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
